<template>
  <a-layout>
    <a-layout-header :style="headerStyle">
      <a-space direction="horizontal" align="center" size="large">
        <input class="targetTitle" v-model="title" type="text" placeholder="请输入标题">
        <a-tooltip>
          <template #title>设置结束日期</template>
          <a-date-picker v-model:value="endTime" :disabled-date="disabledDate"/>
        </a-tooltip>
        <a-button @click="submit" type="dash" size="large" style="color:#fff; background: #a17a39 ; width: 100px">
          <a-spin :spinning="isSubmit"/>
          {{ isSubmit ? '' : '提交' }}
        </a-button>
      </a-space>
      <a-divider>请输入内容</a-divider>
    </a-layout-header>
    <a-layout-content :style="contentStyle">
      <v-md-editor height="80vh" v-model="content"></v-md-editor>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import {onMounted, ref} from "vue";
import myAxios from "../axios.js";
import {message} from "ant-design-vue";
import {useRoute, useRouter} from "vue-router";
import dayjs from "dayjs";

const disabledDate = current => {
  // Can not select days before today and today
  return current && current < dayjs().endOf('day');
};
const endTime = ref(dayjs(new Date()));
const title = ref('');
const content = ref('');
const isSubmit = ref(false);
const headerStyle = {
  height: '20vh',
  background: 'none'
}
const contentStyle = {
  height: '80vh',
}
const route = useRoute();
const router = useRouter();
const id = ref('');
onMounted(() => {
  if (route.query.id !== undefined) {
    id.value = route.query.id
    myAxios.get('/target/getOne?id=' + id.value).then(
        res => {
          if (res.code === 0) {
              title.value = res.data.title;
              content.value = res.data.content;
              endTime.value = dayjs(res.data.endTime===null?new Date():res.data.endTime);
          }else{
            message.error("获取目标规划信息失败");
            router.push('/')
          }
        }
    ).catch(
        error => {
          console.log("目标规划编辑信息Error",error);
        }
    )
  } else {
    message.error("错误，即将返回首页")
    router.push('/')
  }
})
const submit = () => {
  let status = false;
  isSubmit.value = true;
  let msg = '';
  myAxios.post('/target/edit', {
    id: id.value,
    title: title.value,
    content: content.value,
    endTime: endTime.value.format("YYYY-MM-DD")
  }).then(
      res => {
        if (res.code === 0) {
          msg = "请求成功"
          status = true;
        } else {
          msg = res.message
        }
      }
  ).catch(
      error => {
        console.log("编辑目标出错", error);
      }
  )
  setTimeout(() => {
    isSubmit.value = false;
    if (status) {
      message.success(msg);
      router.push({
        path: '/',
        query: {
          tab: '3'
        }
      });
    } else {
      message.warn(msg);
    }
  }, 2000)
}
</script>

<style scoped>
.targetTitle {
  box-sizing: border-box;
  padding-left: 50px;
  font-size: 50px;
  font-weight: bold;
  outline: none;
  border: none;
  border-bottom: 2px solid #ccc;
  height: 10vh;
  width: 80vw;
  color: #000;
}
</style>